<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="icon" href="image/log.ico" >
    <link href="css/googleapis.css" rel="stylesheet">
    <link rel="stylesheet"
        href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css"
        rel="stylesheet" />
    <link href="css/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>点餐系统管理员页面</title>
    <script src="js/vue.js"></script>
    <script src="js/vuetify.js"></script>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
    <div id="app">

        <!-- 左侧导航 -->
        <v-navigation-drawer v-model="drawer" app>
            <v-list dense v-show="!login.isLogin">
                <v-list-item link v-on:click="login.showLoginDialog=true">
                    <v-list-item-action>
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>登录</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>

            <!-- 左侧欢迎信息和导航 -->
            <v-list dense v-show="login.isLogin">
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-account</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{login.username}} 管理员您好!</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="dishCk">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>查看菜品</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="orderCk">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>查看订单</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="logout">
                    <v-list-item-action>
                        <v-icon>mdi-logout</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>退出登录</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app>
            <v-app-bar app color="indigo" dark>
                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>点餐系统</v-toolbar-title>
            </v-app-bar>
            <v-main>

                <!-- 菜品列表 -->
                <v-simple-table v-show="status == 'dishesPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">菜名</th>
                                <th class="text-left">价格</th>
                                <th class="text-left">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="dish in dishes">
                                <td>
                                    <v-icon>mdi-food</v-icon>
                                    {{dish.name}}
                                </td>
                                <td>
                                    <v-icon>mdi-cash</v-icon>
                                    {{dish.price}}
                                </td>
                                <td>
                                    <v-btn color="primary" v-on:click="delDish(dish.did)">删除</v-btn>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>
                <v-row v-show="status == 'dishesPage' && login.isLogin">
                    <v-col :col="11">
                    </v-col>
                    <v-col :cols="2">
                        <v-btn color="primary" v-on:click="showAddDish=true" block>新增菜品</v-btn>
                    </v-col>
                </v-row>

                <!-- 订单列表 -->
                <v-simple-table v-show="status == 'ordersPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">序号</th>
                                <th class="text-left">用户</th>
                                <th class="text-left">金额</th>
                                <th class="text-left">状态</th>
                                <th class="text-left">时间</th>
                                <th class="text-left">详情</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in orders">
                                <td>{{order.oid}}</td>
                                <td>{{order.username}}</td>
                                <td>{{order.money}}</td>
                                <td>
                                    <v-switch v-model="order.state" v-on:click="updateOrder(order.oid,order.state)">
                                    </v-switch>
                                </td>
                                <td>{{order.createtime}}</td>
                                <td>
                                    <v-btn color='primary' v-on:click="showDetail(order.oid)">查看详情</v-btn>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>

                <v-row v-show="!login.isLogin">
                    <v-col>
                        <v-card class="pa-2 text-center">请先登录!</v-card>
                    </v-col>
                </v-row>
                <v-row justify="center">
                    <v-dialog v-model="login.showLoginDialog" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">登录</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="login.username" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" v-model="login.password" type="password" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" v-on:click="doLogin" block>登录</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" v-on:click="login.showLoginDialog = false" block>取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <v-row justify="center">
                    <v-dialog v-model="showCurOrder" persistent max-width="600px">
                        <v-simple-table>
                            <template v-slot:default>
                                <thead>
                                    <tr>
                                        <th class="text-left">菜品</th>
                                        <th class="text-left">价格</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="order in curOrder">
                                        <td>{{order.name}}</td>
                                        <td>{{order.price}}</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <v-btn color="primary" v-on:click="showCurOrder = false">关闭</v-btn>
                                        </td>
                                    </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </v-dialog>
                </v-row>
                <!-- 新增菜品 -->
                <v-row justify="center">
                    <v-dialog v-model="showAddDish" persistent max-width="600px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">新增菜品</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="菜品名*" v-model="newDish.name" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="价格(元)*" v-model="newDish.price" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="addDish">新增</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="showAddDish = false">取消</v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>
            </v-main>
        </v-app>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                drawer: null,
                status: 'dishesPage', // 取值为: ordersPage, dishesPage
                // 登陆相关参数定义
                login: {
                    isLogin: false,
                    showLoginDialog: false,
                    username: "",
                    password: "",
                },
                user: {
                    name: 'test',
                    isAdmin: 0,
                },
                dishes: [],
                orders: [],
                // 辅助实现订单显示详情
                showCurOrder: false,
                curOrder: [],
                // 实现显示新增菜品窗口
                showAddDish: false,
                newDish: {
                    name: "",
                    price: "",
                },
            },
            methods: {
                // 修改订单状态
                updateOrder(oid, state) {
                    jQuery.ajax({
                        url: "uporder",
                        type: "POST",
                        data: {
                            oid: oid,
                            state: state ? 1 : 0
                        },
                        success: function (result) {
                            if (result != null && result.data != null && result.data > 0) {
                                // alert("操作成功！");
                            } else {
                                alert("操作失败，请重试！");
                            }
                        }
                    });
                },
                // 查看订单详情
                showDetail(oid) {
                    this.showCurOrder = true;
                    jQuery.ajax({
                        url: "orderdetail",
                        type: "GET",
                        data: {
                            oid: oid
                        },
                        success: function (result) {
                            if (result != null && result.data != null) {
                                app.curOrder = result.data;
                            } else {
                                alert("查询失败，请重试！");
                            }
                        }
                    })
                },
                // 查看菜品
                dishCk() {
                    this.status = "dishesPage";
                    // ajax请求获取并赋值菜品
                    jQuery.ajax({
                        url: "dishlist",
                        type: "GET",
                        success: function(result) {
                            if (result != null && result.data != null) {
                                app.dishes = result.data;
                            }
                        }
                    });
                },
                // 查看订单
                orderCk() {
                    this.status = "ordersPage";
                    jQuery.ajax({
                        url: "orderlist",
                        type: "GET",
                        data: {},
                        success: function (result) {
                            if (result != null && result.data != null) {
                                app.orders = result.data;
                            }
                        }
                    });
                },
                // 新增菜品
                addDish() {
                    if (this.newDish.name == "") {
                        alert("请先输入菜品名称！");
                        return;
                    }
                    if (this.newDish.price == "") {
                        alert("请先输入菜品的价格！");
                        return;
                    }
                    // 2.将参数提交给后端
                    jQuery.ajax({
                        url: "adddish",
                        type: "POST",
                        data: {
                            name: this.newDish.name,
                            price: this.newDish.price
                        },
                        success: function (result) {
                            if (result != null && result.state == 200 && result.data == 1) {
                                alert("添加成功！");
                                // 隐藏添加窗体
                                app.showAddDish = false;
                                location.href = location.href;
                            } else if (result != null && result.data != 1) {
                                alert(result.msg);
                            }
                            else {
                                alert("服务器繁忙，请稍后再试！");
                            }
                        }
                    });
                },
                // 删除菜品
                delDish(did) {
                    if (confirm("确认删除？")) {
                        jQuery.ajax({
                            url: "deldish",
                            type: "POST",
                            data: {
                                did: did
                            },
                            success: function(result) {
                                if (result != null && result.state == 200) {
                                    alert(result.msg);
                                    location.href = location.href;
                                } else {
                                    alert(result.msg);
                                }
                            }
                        })
                    }
                },
                // 登录
                doLogin() {
                    // 非空校验
                    if (this.login.username == "") {
                        alert("请输入用户名！");
                        return;
                    }
                    if (this.login.password == "") {
                        alert("请输入密码！");
                        return;
                    }
                    // 请求后端进行登录
                    jQuery.ajax({
                        url: "login",
                        type: "POST",
                        data: {
                            username: this.login.username,
                            password: this.login.password,
                            isadmin: 1
                        },
                        success: function (result) {
                            if (result != null && result.data != null && result.state == 200) {
                                // 隐藏登录窗体
                                app.login.showLoginDialog = false;
                                app.initLogin(result.data);
                            } else {
                                alert("用户名或密码错误！");
                            }
                        }
                    });
                },
                // 判断是否登录
                init() {
                    jQuery.ajax({
                        url: "sess",
                        type: "GET",
                        success: function (result) {
                            if (result != null && result.state == 200) {
                                // 已登录
                                app.initLogin(result.data);
                            }
                        }
                    });
                },
                // 显示登录的信息
                initLogin(username) {
                    // 左侧欢迎信息
                    app.login.isLogin = true;
                    app.login.username = username;
                    // 右侧菜品信息
                    app.status = "dishesPage";
                    jQuery.ajax({
                        url: "dishlist",
                        type: "GET",
                        data: {
                            isdown: 0
                        },
                        success: function (result) {
                            if (result != null && result.data != null && result.data.length > 0) {
                                // 将数据赋值给vue变量
                                app.dishes = result.data;
                            }
                        }
                    });
                },
                // 退出登录
                logout() {
                    if (confirm("确认退出？")) {
                        jQuery.ajax({
                            url: "logout",
                            type: "POST",
                            success: function (result) {
                                if (result != null && result.state == 200) {
                                    // alert("退出登录成功！");
                                    app.login.isLogin = false;
                                } else {
                                    alert("退出登录失败，请重试！");
                                }
                            }
                        });
                    }
                }
            },
            computed: {},
            vuetify: new Vuetify(),
        });
        app.init();
    </script>
</body>

</html>